<template>
    <div class="can_detail">
      <head-top head-title="公示详情" go-back="true"></head-top>
      <div class="select_view">
        <div class="view_li" v-for="(item,index) in detailist" :key="index" @click="toVotingDetail(item.candidateId)">
          <div class="header_box">
            <img v-if="item.img" :src="item.img" alt="">
            <img v-if="!item.img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg" alt="">
          </div>
          <div class="word_box">
            <div class="box_left">
              <span>姓名：{{item.options}}</span>
              <p>房号：{{item.house}}</p>
            </div>
            <div class="box_right">
              <p class="introduce">人物介绍</p>
              <div class="chose_view" v-if="item.type !==''">
                <img src="../my/images/xuanzhong@2x.png" alt="">
                <span>{{item.type}}</span>
              </div>
              <p v-if="item.type===''" class="no_chose">暂未选择</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import headTop from '../header/Header'
  import {canDetail} from '../../api/homeLogin'

  export default {
    name: 'CanDetail',
    data () {
      return {
        name: 'can',
        detailist: []
      }
    },
    created () {
      this._getCanDetail()
    },
    methods: {
      _getCanDetail() {
        canDetail(this.$route.params.id, this.name, this.$route.params.uid).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.detailist = res.data
            // console.log(this.detailist)
          }
        })
      },
      // 查看人物介绍
      toVotingDetail(id) {
        this.$router.push('/home/VotingDetail/' + id)
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
.can_detail{
  width: 100%;
  padding-top: 40px;
  .select_view{
    .view_li{
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 1px 3px 6px #e3e3e3;
      .header_box{
        padding: 10px;
        img{
          width: 44px;
          height: 44px;
          border-radius: 50%;
        }
      }
      .word_box{
        flex: 1;
        display: flex;
        justify-content: space-between;
        .box_left{
          span{
            color: #333333;
            font-size: 14px;
          }
          p{
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
          }
        }
        .box_right{
          padding-right: 10px;
          text-align: right;
          .introduce{
            color: #0078de;
          }
          p{
            font-size: 14px;
            color: #333333;
          }
          .chose_view{
            display: inline-flex;
            align-items: center;
            margin-top: 10px;
            img{
              width: 20px;
              height: 20px;
            }
            span{
              margin-left: 10px;
              font-size: 14px;
              color: #333333;
            }
          }
          .no_chose{
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
